<!-- top -->
<div class="ddp-top-flow">
  <!-- Edit data -->
  <div class="ddp-data-form">
    <span class="ddp-txt-date">
      {{ 'msg.metadata.metadata.detail.ui.updated.at' | translate }} {{ metadata.modifiedTime | mdate:'YYYY-MM-DD HH:mm' }} by {{ metadata.modifiedBy.fullName }}
    </span>

    <!-- more -->
    <!-- add ddp-selected when more button clicked -->
    <div class="ddp-ui-more" [ngClass]="{'ddp-selected': more}" (click)="onMoreButtonClicked()">
      <a href="javascript:" class="ddp-icon-more"></a>
      <!-- popup -->
      <div class="ddp-data-box">
        <a *ngIf="!isEngineSource" (click)="deleteMetadata()" href="javascript:" class="ddp-list-link"><em class="ddp-icon-delete"></em>{{ 'msg.metadata.metadata.detail.ui.delete.metadata' | translate }}</a>
        <span class="ddp-data-by">
          {{ 'msg.metadata.metadata.detail.ui.created.at' | translate }} {{ metadata.createdTime | mdate:'YYYY-MM-DD HH:mm' }} by {{ metadata.modifiedBy.fullName }}
        </span>
      </div>
      <!-- //popup -->
    </div>
    <!-- //more -->
  </div>
  <!-- //Edit data -->
  <!-- navi wrap -->
  <div class="ddp-wrap-navi">
    <a href="javascript:" class="ddp-btn-back" (click)="goBack()"></a>
    <!-- navi -->
    <div class="ddp-ui-naviarea">
      <!-- name -->
      <!-- add ddp-selected when clicked -->
      <div class="ddp-box-navi" [class.ddp-selected]="editNameFlag" (click)="onClickEditName()" title="{{editName}}">
        <div class="ddp-wrap-naviname">
              <span class="ddp-data-naviname">{{ editName }}
                <em class="ddp-icon-edit2" ></em>
              </span>
        </div>
        <!-- Edit input -->
        <div class="ddp-wrap-input">
          <input type="text" class="ddp-input-navi" placeholder="" [(ngModel)]="editName" value="{{ editName }}">
          <span class="ddp-btn-check" (click)="onClickUpdateName()"></span>
        </div>
        <!-- //Edit input -->

      </div>
      <!-- //name -->

      <!-- description -->
      <!-- add ddp-selected when clicked -->
      <div class="ddp-box-navidet" [class.ddp-selected]="editDescriptionFlag" (click)="onClickEditDescription()" title="{{editDescription}}">
        <div class="ddp-wrap-navidet">
              <span class="ddp-data-navidet">{{ metadata.description }}
                <em class="ddp-icon-edit2"></em>
              </span>
        </div>
        <!-- Edit input -->
        <div class="ddp-wrap-input">
          <input type="text" class="ddp-input-navi" placeholder="" [(ngModel)]="editDescription" value="{{ editDescription }}">
          <span class="ddp-btn-check" (click)="onClickUpdateDescription()"></span>
        </div>
        <!-- Edit input -->
      </div>
      <!-- //description -->
    </div>
    <!-- //navi -->
  </div>
  <!-- //navi wrap -->
</div>
<!-- //top -->
